<template>
  <BasicTable @register="registerTable" ref="basicTable">
    <!--插槽:table标题-->
    <template #tableTitle>
      <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined" ref="addBtn"> {{ t('title') }}</a-button>
    </template>
    <!--操作栏-->
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template>
  </BasicTable>
  <Tour v-model:current="current" v-model:show="show" :steps="steps" />

  <!-- 表单区域 -->
  <FormModal ref="registerModal" @success="handleSuccess"></FormModal>
</template>

<script lang="ts" name="use_and_return-useAndReturn" setup>
  import { ref, h, onMounted } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { columns, searchFormSchema } from './data';
  import { list, deleteOne, getImportUrl, getExportUrl } from './api';
  import FormModal from './components/FormModal.vue';
  import { Tour, type TourStep } from '@/components/Tour/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n('asset.assetReturnResignation');
  const { t: common } = useI18n('common');

  const registerModal = ref<InstanceType<typeof FormModal>>();
  //注册table数据
  const { tableContext } = useListPage({
    tableProps: {
      title: t('title'),
      api: list,
      columns,
      canResize: false,
      formConfig: {
        //labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      actionColumn: {
        width: 180,
        fixed: 'right',
      },
    },
    exportConfig: {
      name: t('title'),
      url: getExportUrl,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });
  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;

  /**
   * 新增事件
   */
  function handleAdd() {
    if (registerModal.value) {
      registerModal.value.disableSubmit = false;
      registerModal.value.add();
    }
  }

  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable, step = 0) {
    if (registerModal.value) {
      registerModal.value.disableSubmit = false;
      registerModal.value.edit(record, step);
    }
  }

  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    if (registerModal.value) {
      registerModal.value.disableSubmit = true;
      registerModal.value.edit(record);
    }
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteOne({ id: record.id }, handleSuccess);
  }

  /**
   * 批量删除事件
   */
  // async function batchHandleDelete() {
  //   await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
  // }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    const options = {
      EDIT: {
        label: common('editText'),
        onClick: handleEdit.bind(null, record, 0),
        disabled: false,
      },
      UPLOAD: {
        label: common('submitText'),
        onClick: handleEdit.bind(null, record, 1),
        disabled: false,
      },
      DELETE: {
        label: common('delText'),
        popConfirm: {
          title: common('delTip'),
          placement: 'left',
          confirm: handleDelete.bind(null, record),
        },
      },
      DETAIL: {
        label: common('detailText'),
        onClick: handleDetail.bind(null, record),
        disabled: false,
      },
    };
    return (() => {
      switch (record.status) {
        case '1':
          // return [options.EDIT, options.UPLOAD, options.DELETE];
          return [options.UPLOAD, options.DELETE];
        case '2':
          return [options.DETAIL];
        default:
          return [options.DETAIL];
      }
    })();
  }

  // /**
  //  * 下拉操作栏
  //  */
  // function getDropDownAction(record) {
  //   record.requestsStatus;
  //   return [
  //     (() => {
  //       return {
  //         label: '详情',
  //         onClick: handleDetail.bind(null, record),
  //       };
  //     })(),
  //     {
  //       label: '删除',
  //       popConfirm: {
  //         title: '是否确认删除',
  //         placement: 'left',
  //         confirm: handleDelete.bind(null, record),
  //       },
  //     },
  //   ];
  // }
  const addBtn = ref();
  const basicTable = ref<InstanceType<typeof BasicTable>>();

  const show = ref(false);
  const current = ref(0);
  const steps = ref<TourStep[]>([
    {
      el: () => addBtn.value.$el,
      title: t('title'),
      message: t('tour.step1Msg'),
      placement: 'right',
      next: (next) => {
        handleAdd();
        setTimeout(() => {
          next(700);
        }, 300);
      },
    },
    {
      el: () => registerModal.value?.registerForm?.$el,
      title: common('addText'),
      message: h('div', {}, [t('tour.step2Msg1'), h('span', { style: 'color:red;' }, ' * '), t('tour.step2Msg2')]),

      prev: (prev) => {
        registerModal.value?.close();
        prev();
      },
      placement: 'left',
    },
    {
      el: () => registerModal.value?.footer,
      title: t('tour.step3Title'),
      message: t('tour.step3Msg'),
      next: (next) => {
        registerModal.value?.close();
        next();
      },
      placement: 'top-start',
    },
    {
      el: () => basicTable.value?.tableElRef?.$el,
      title: t('tour.step4Title'),
      message: t('tour.step4Msg'),
      prev: (prev) => {
        handleAdd();
        setTimeout(() => {
          prev(700);
        }, 400);
      },
    },
  ]);
  onMounted(() => {
    setTimeout(() => {
      // show.value = true;
    }, 200);
  });
</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .ant-form {
      margin-bottom: 0;
    }
    // .ant-form-item {
    //   margin-bottom: 0;
    // }
    .ant-col {
      height: 38px;
    }
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
</style>
